<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '150px'">
        <el-row class="tac">
          <el-col :span="24">
            <p class="toggle-button">
              <el-icon>
                <Menu />
              </el-icon>
            </p>
            <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse"
              :collapse-transition="false" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
              @open="handleOpen" @close="handleClose">
              <el-menu-item style="height: 40px;" index="1" @click="navigateTo('/Home')">
                <el-icon>
                  <HomeFilled />
                </el-icon>
              </el-menu-item>

              <!-- 动态渲染子菜单 -->
              <el-sub-menu style="height: 40px;" v-for="menu in menuItems" :key="menu.menu_id"
                :index="menu.menu_id.toString()">
                <template #title>
                  <el-icon>
                    <component :is="menu.menu_icon" /> <!-- 动态渲染图标组件 -->
                  </el-icon>
                  <span class="pt">{{ menu.menu_name }}</span>
                </template>

                <el-menu-item v-for="item in menu.children || []" :key="item.menu_id" :index="item.menu_id.toString()"
                  @click="navigateTo(item.menu_url)">
                  <el-icon>
                    <component :is="item.menu_icon" /> <!-- 动态渲染图标组件 -->
                  </el-icon>
                  {{ item.menu_name }}
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header class="bj">
          <h1 class="header-title">云博智能工厂管理系统</h1> 
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { Menu, HomeFilled } from '@element-plus/icons-vue';

export default {
  setup() {
    const isCollapse = ref(true);
    const router = useRouter();
    const menuItems = ref([]);

    const fetchMenu = async () => {
      try {
        const response = await axios.get('api/Menu/GetMenus');
        menuItems.value = response.data;
      } catch (error) {
        console.error('获取菜单数据失败:', error);
      }
    };

    const toggleCollapse = () => {
      isCollapse.value = !isCollapse.value;
    };

    const navigateTo = (path) => {
      router.push(path);
    };

    const handleOpen = () => {};
    const handleClose = () => {};

    onMounted(fetchMenu);

    return {
      isCollapse,
      menuItems,
      toggleCollapse,
      navigateTo,
      handleOpen,
      handleClose
    };
  }
};
</script>

<style scoped>
html,
body {
  height: 100%;
  margin: 0;
}

.common-layout {
  width: 100%;
  height: 98vh;
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: #545C64;
  color: #333;
  text-align: center;
  line-height: 30px;
  height: auto;
}

.el-header {
  background-color: #C6E2FF;
  color: #333;
  text-align: center;
  /* 调整高度和行高 */
  height: 80px; 
  line-height: 80px; 
}

.el-main {
  background-color: #ECF5FF;
  color: #333;
  text-align: center;
  line-height: 30px;
  padding: 20px;
}

.tac {
  height: 100%;
}

.bj {
  /* 修正背景图片路径 */
  background-image: url('@/assets/347719.jpg'); 
  background-size: cover;
  background-repeat: no-repeat;
}
.cs{
  background-image: url('@/assets/bj.jpg'); 
  background-size: cover;
  background-repeat: no-repeat;
}
.header-title {
  color: white;
  font-size: 30px;
  letter-spacing: 6px;
  /* 防止文本溢出 */
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.toggle-button {
  cursor: pointer;
}

.eltable {
  height: 95%;
  background-color: rgba(255, 255, 255, 0);
}
</style>